<template>
    <div class="container">
        <div class="header">
            <!-- 选择 prop 格式的选择器 -->
            <el-select v-model="propFormat" placeholder="prop 格式" @change="generateVueCode"
                       style=" width: 120px;" size="mini"
            >
                <el-option label="下划线" value="underscore"></el-option>
                <el-option label="小驼峰" value="camelCase"></el-option>
                <el-option label="大驼峰" value="PascalCase"></el-option>
            </el-select>

            <div style="display: inline-block">
                <el-button
                        type="default"
                        @click="addOption('show-overflow-tooltip')"
                        :style="getButtonStyle('show-overflow-tooltip')"
                        style="margin-left: 10px;"
                        size="mini"
                >
                    show-overflow-tooltip
                </el-button>
                <el-button
                        type="default"
                        @click="addOption('align')"
                        :style="getButtonStyle('align')"
                        size="mini"

                >
                    align
                </el-button>
            </div>
        </div>
        <div class="content">


            <div class="left">
                <el-input
                        type="textarea"
                        v-model="sqlInput"
                        placeholder="请输入 SQL 创建表语句..."
                        rows="10"
                        style="width: 100%; font-family: monospace; font-size: 14px"
                ></el-input>
            </div>

            <div class="right">
                <el-input
                        type="textarea"
                        v-model="generatedCode"
                        readonly
                        rows="10"
                        style="width: 100%; font-family: monospace; font-size: 14px;background-color: #f9f9f9"
                ></el-input>
            </div>
        </div>

        <div class="btn">
            <!-- 转换按钮 -->
            <el-button
                    type="primary"
                    @click="extractFields"
                    size="mini"
                    style="margin-top: 20px; background-color: black; color: white;border-radius: 10px;"

            >
                转换
            </el-button>
        </div>


    </div>
</template>

<script>
    export default {
        name: "viewPort",

        data() {
            return {
                sqlInput: "", // 输入的 SQL 创建表语句
                fields: [], // 存储提取的字段和注释
                generatedCode: "", // 存储生成的 Vue 代码
                propFormat: "", // prop 格式选项，默认为下划线
                selectedOptions: [], // 允许多选的属性选项数组
            };
        },

        methods: {
            // 提取 SQL 创建表语句中的字段和注释
            extractFields() {
                const regex = /`(.*?)`\s+.*?COMMENT\s+'(.*?)'/g;
                let match;
                const extractedFields = [];

                while ((match = regex.exec(this.sqlInput)) !== null) {
                    extractedFields.push({
                        field: match[1], // 字段名
                        comment: match[2], // 注释内容
                    });
                }
                this.fields = extractedFields;
                console.log(extractedFields);
                this.generateVueCode(); // 提取字段后重新生成 Vue 代码
            },

            // 根据提取出来的字段和注释生成 Vue 代码
            generateVueCode() {
                let code = '';
                this.fields.forEach((item) => {
                    // 根据选中的格式转换 prop 名称
                    let formattedProp = this.formatProp(item.field);

                    let additionalProps = '';
                    this.selectedOptions.forEach((option) => {
                        if (option === "show-overflow-tooltip") {
                            additionalProps += ' show-overflow-tooltip';
                        } else if (option === "align") {
                            additionalProps += ` align="center"`;
                        }
                    });

                    code += `<el-table-column prop="${formattedProp}" label="${item.comment}"${additionalProps} />\n`;
                });
                this.generatedCode = code;
            },

            // 添加选中的属性到 selectedOptions 数组
            // addOption(option) {
            //     if (!this.selectedOptions.includes(option)) {
            //         this.selectedOptions.push(option);
            //         console.log(this.selectedOptions)
            //     }
            //     this.generateVueCode(); // 更新代码
            // },

            // 获取按钮的样式
            getButtonStyle(option) {
                return this.selectedOptions.includes(option) ?
                    {backgroundColor: '#409EFF', color: 'white'} :
                    {backgroundColor: '', color: ''};
            },

            addOption(option) {
                const index = this.selectedOptions.indexOf(option);
                if (index === -1) {
                    // 如果没有选中该选项，添加它
                    this.selectedOptions.push(option);
                } else {
                    // 如果已经选中该选项，删除它
                    this.selectedOptions.splice(index, 1);
                }
                console.log(this.selectedOptions)

                this.generateVueCode(); // 更新代码
            },

            // 格式化 prop 名称
            formatProp(prop) {
                switch (this.propFormat) {
                    case "underscore":
                        return this.toUnderscore(prop);
                    case "camelCase":
                        return this.toCamelCase(prop);
                    case "PascalCase":
                        return this.toPascalCase(prop);
                    default:
                        return prop;
                }
            },

            // 下划线格式（snake_case）
            toUnderscore(str) {
                return str.replace(/[A-Z]/g, (match) => `_${match.toLowerCase()}`);
            },

            // 小驼峰格式（camelCase）
            toCamelCase(str) {
                return str.replace(/_([a-z])/g, (match, letter) => letter.toUpperCase());
            },

            // 大驼峰格式（PascalCase）
            toPascalCase(str) {
                const camelCase = str.replace(/_([a-z])/g, (match, letter) => letter.toUpperCase());
                return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
            },

            // 复制生成的代码到剪贴板
            copyToClipboard() {
                const textArea = document.createElement("textarea");
                textArea.value = this.generatedCode;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand("copy");
                document.body.removeChild(textArea);
                this.$message.success("代码已复制到剪贴板！");
            },
        },
    };
</script>

<style scoped>
    .container {
        background-color: #f8f5f3;
        min-height: 100vh;
        width: 100%;
        height: 100%;
    }

    .content {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        align-content: center;
    }

    .content .left,
    .content .right {
        margin-top: 20px;
        border-radius: 10px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    }

    .left {
        width: 600px;

    }

    .right {
        width: 600px;
    }

    .btn {
        width: 100%;
        display: flex;
        justify-content: center

    }

    .header {
        display: flex;
        justify-content: flex-end;
        align-content:center
    }
</style>
